<template>
  <div class="mine">
    <x-header>我的<i slot="right" class="icon-shezhi" @click="$router.push('/settings')"></i></x-header>
    <group style="margin-top:1px;">
      <cell class="my-head-box" is-link @click.native="_detail" value="个人主页及编辑资料">
        <span slot="title">
          <div class="my-head-title">{{userInfo.nickname || '昵称未设置'}}</div>
          <div class="tip">
            <span>等级 </span>
            <i class="icon-level-3"></i>
            <span style="margin-left:10px;">积分 <span style="color:#8AA2AD;">{{userInfo.point}}</span></span>
          </div>
        </span>
        <avatar style="margin-right:10px;" username="Lairenna" slot="icon" :size="40" :src="userInfo.avatar"></avatar>
      </cell>
    </group>
    <grid class="item-box" :show-lr-borders="false" :cols="3">
      <grid-item v-for="(item,i) in modelList" :key="i" @click.native="handleClickTab(item.name)"  :link="item.route" :label="item.name">
        <i slot="icon" :class="item.icon" :style="{color: item.color}"></i>
      </grid-item>
    </grid>
    <alert id="myAlet" v-model="showSign" :title="signTitle" button-text="我知道了">
      <p class="sign-p1">已领取两积分</p>
      <p class="sign-p2">(积分已到您的账户)</p>
    </alert>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { XHeader, Grid, GridItem, Cell, Group, Alert } from 'vux';
import Avatar from 'vue-avatar'
const IndexStore = namespace('mine');

@Component({
  components: { Avatar, XHeader, Grid, GridItem, Cell, Group, Alert }
})
export default class Mine extends Vue {
  @IndexStore.Action getDailySignin
  showSign = false
  signTitle = '签到成功'
  modelList = [
    { icon: 'icon-soutiezi', name: '我的帖子', route: '/mypost', color: '#80d87e' },
    { icon: 'icon-xiaoxi-wodeguanzhu', name: '我的关注', route: '/myattention', color: '#ffd144' },
    { icon: 'icon-fensi', name: '我的粉丝', route: '/myfans', color: '#ff6666' },
    { icon: 'icon-dianzan2', name: '我的点赞', route: '/mylikes', color: '#fe6e71' },
    { icon: 'icon-qianbao1', name: '我的钱包', route: '/wallet', color: '#7ae6bf' },
    // { icon: 'icon-qiaquan', name: '我的卡券', route: '', color: '#ffc14f' },
    // { icon: 'icon-jifen', name: '积分商城', route: '/integral', color: '#a6d87e' },
    { icon: 'icon-qiandao1', name: '每日签到', route: '', color: '#44c1ff' },
    { icon: 'icon-shoucang', name: '我的收藏', route: '/mycollection', color: '#6ba2f5' },
    { icon: 'icon-choujiang', name: '积分抽奖', route: '/lottery', color: '#fe6e71' },
    { icon: 'icon-kefuzhongxin', name: '客服中心', route: '/chatlist/0', color: '#a6d87e' }
  ]
  userInfo = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  handleClickTab (name) {
    if (name === '每日签到') {
      this.getDailySignin({}).then(msg => {
        this.showSign = true
        if (msg) {
          this.signTitle = msg
        } else {
          this.signTitle = '签到成功'
        }
      })
    }
  }
  _detail () {
    this.$router.push(this.userInfo ? '/personinfo' : '/login')
  }
}
</script>
<style lang="less">
  .mine {
    padding-top: 51px;
    #myAlet {
      .weui-dialog__hd {
        padding-top: 28px;
      }
      .sign-p1 {
        color: #5f5f5f;
        padding-bottom: 5px;
        font-size: 18px;
      }
      .sign-p2 {
        color: #8a8a8a;
        font-size: 16px;
      }
      .weui-dialog__title {
        font-size: 24px;
        color: #ffffff;
      }
      .weui-dialog {
        background: url('../../static/sign.png');
        background-size: 100% 100%;
        .weui-dialog__bd {
          padding-top: 20px;
          height: 120px;
          padding-bottom: 0px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
      }
    }
    .vux-header-left {
      display: none !important;
    }
    .weui-grid__icon {
      line-height: 30px;
      text-align: center;
      i {
        font-size: 30px !important;
      }
    }
    .weui-cells {
      margin-top: 0;
    }
    .item-box {
      margin-top: 5px;
      a {
        background-color: #ffffff;
      }
    }
    .my-head-box {
      background: #ffffff;
      color: #666666;
      box-sizing: border-box;
      height: 80px;
      .my-head-title {
        font-size: 14px;
        color: #333333;
        line-height: 24px;
      }
      .tip{
        color:#999;
        display: flex;
        align-items: center;
        i {
          color: #ec9600;
          font-size: 28px;
        }
      }
    }
  }
</style>
